<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 5000px;
            width: 5000px;
        }

        .fixed {
            position: fixed;
            top: 5px;
            right: 5px;
        }
    </style>
</head>

<body>
    <button class="open">打开百度</button>
    <button class="close">关闭百度</button>
    <div class="fixed">
        <button class="scrollBy">scrollBy</button>
        <button class="scrollTo">scrollTo</button>
    </div>
</body>
<script>
    // window 全局对象  -> 属性和方法 (用户自定义和官方的)

    // 属性:
    // window.innerWidth / window.innerHeight   窗口的可视宽高(不包含控制台 包含滚动条)
    // window.outerWidth / window.outerHeight   窗口的实际宽高(包含控制台 包含滚动条)

    // console.log(window.innerWidth, window.innerHeight);
    // console.log(window.outerWidth, window.outerHeight);

    // 方法:
    // window.open(url,name,窗口特征)  打开新的窗口,或查找已命名的窗口
    // url  窗口地址 
    // name 窗口名称   没有对应名字的窗口,就打开新的,有就刷新
    // 窗口特征     定义窗口大小和相对于屏幕偏移
    // 返回值: 被打开的窗口的window

    // window.close()       对应window关闭窗口

    // window.scrollBy(x,y)  相较于页面当前位置滚动对应的数值 
    // window.scrollTo(x,y)   直接将滚动条滚动到指定位置

    var openBtn = document.getElementsByClassName("open")[0];
    var closeBtn = document.getElementsByClassName("close")[0];
    var scrollByBtn = document.getElementsByClassName("scrollBy")[0];
    var scrollToBtn = document.getElementsByClassName("scrollTo")[0];

    var subWindow = null;

    openBtn.onclick = function () {
        // window.open("https://www.baidu.com"); // 每次打开新的
        // window.open("https://www.baidu.com", "baidu"); // 打开新的窗口,或查找已命名的窗口
        subWindow = window.open("https://www.baidu.com", "baidu", "width=600px,height=400px,left=100px,top=100px"); // 定义窗口大小和相对于屏幕偏移
        // window.open("./06 小广告.html", "baidu", "width=600px,height=400px,left=100px,top=100px"); // 定义窗口大小和相对于屏幕偏移
    }

    closeBtn.onclick = function () {
        // window.close();  关闭当前窗口
        if (subWindow) {
            subWindow.close();
        }
    }


    scrollByBtn.onclick = function () {
        window.scrollBy(100, 100)
    }

    scrollToBtn.onclick = function () {
        // window.scrollTo(1000, 1000)

        window.scrollTo({
            left: 1000,
            top: 1000,
            behavior: "smooth",  //滚动的方式 smooth(平滑的) / auto(自动) 
        })
    }


</script>

</html>